<template>

    <van-nav-bar title="商品详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" height="300" :src="productdetails.productImage" />
    <hr>
    <div style="font-size: 26px; color: red; font-weight: 700;"><em>￥</em>{{ productdetails.productSalePrice }}<em>.00</em></div>
    <div>
        {{ productdetails.productName }}
    </div>
    <van-row style="margin-top: 10px;">
        <van-col span="12">
            <span style="margin-left: 80px;">
                <img src="https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png"
                    width="16" height="16" alt=""></span>
            <span style="color: #b7bac0; margin-left: 5px; font-size: 17px;">分享</span></van-col>
        <van-col span="12">
            <span style="margin-left: 80px;">
                <van-icon name="star-o" size="20px" color="#b7bac0" />
            </span>
            <span style="color: #b7bac0; margin-left: 5px; font-size: 17px;">收藏</span>
        </van-col>

    </van-row>
    <hr>
    <div>
        {{ productdetails.productIntroduction }}
        <img :src="productdetails.productImage" alt="" width="100%">
    </div>
</template>

<script setup>
import { getProduct } from '@/api/product/product'
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
const onClickLeft = () => history.back();

const id = ref()
onMounted(() => {
    console.log(route.query.id);
    id.value = route.query.id;
    productapi()
})
const productdetails = reactive({
    productName: '',
    productImage: '',
    productIntroduction: '',
    productSalePrice:0
})
//获取商品详情数据
const productapi = () => { 
    getProduct(id.value).then(res => {
        console.log(res);
        productdetails.productName = res.data.productName
        productdetails.productImage = res.data.productImage.replace('/profile', 'http://www.hphs.com')
        productdetails.productIntroduction = res.data.productIntroduction
        productdetails.productSalePrice = res.data.productSalePrice
        console.log(productdetails.productImage);
        
})
}
</script>

<style lang="scss" scoped></style>